<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title data-i18n="title">Stripe 自动扣款示例</title>
    <script src="https://js.stripe.com/v3/"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .subscription-box {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            width: 400px;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #card-element {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        #error-message {
            color: red;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="subscription-box">
    <h2 data-i18n="subscribe_title">开通会员订阅</h2>
    <form id="subscription-form">
        <label for="name" data-i18n="label_name">姓名</label>
        <input type="text" id="name" name="name" placeholder="张三" required>

        <label for="email" data-i18n="label_email">邮箱</label>
        <input type="email" id="email" name="email" placeholder="user@example.com" required>

        <label for="card-element" data-i18n="label_card">卡信息</label>
        <div id="card-element"></div>

        <button type="submit" data-i18n="btn_subscribe">开通会员</button>
        <div id="error-message"></div>
    </form>
</div>

<script>
    const stripe = Stripe("${stripePublicKey}");
    const elements = stripe.elements();
    const card = elements.create("card");
    card.mount("#card-element");

    document.getElementById("subscription-form").addEventListener("submit", async (event) => {
        event.preventDefault();
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;

        // 第一步：请求后端创建 SetupIntent + Customer
        const res = await fetch("/stripe/setup/intent/create", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                name: name,
                email: email
            })
        });
        const data = await res.json();

        if (!data.clientSecret || !data.customerId) {
            document.getElementById("error-message").textContent = "创建 setup intent 失败";
            return;
        }

        // 第二步：前端确认卡绑定
        const { setupIntent, error } = await stripe.confirmCardSetup(data.clientSecret, {
            payment_method: {
                card: card,
                billing_details: {
                    // 这些参数也是会入库 stripe 的，页面展示
                    name: name,
                    email: email
                }
            }
        });

        if (error) {
            document.getElementById("error-message").textContent = error.message;
            return;
        }

        // 第三步：通知后端创建订阅
        const res2 = await fetch("/stripe/subscription/create", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                customerId: data.customerId,
                paymentMethodId: setupIntent.payment_method
            })
        });

        if (res2.ok) {
            alert("订阅成功，欢迎成为会员！");
        } else {
            document.getElementById("error-message").textContent = "订阅失败，请稍后再试";
        }
    });

    const i18n = {
        zh: {
            title: "订阅会员服务",
            subscribe_title: "开通会员订阅",
            label_name: "姓名",
            label_email: "邮箱",
            label_card: "卡信息",
            btn_subscribe: "开通会员"
        },
        en: {
            title: "Subscribe to Membership",
            subscribe_title: "Start Your Subscription",
            label_name: "Name",
            label_email: "Email",
            label_card: "Card Info",
            btn_subscribe: "Subscribe"
        }
    };

    const lang = navigator.language.startsWith("zh") ? "zh" : "en";
    document.querySelectorAll("[data-i18n]").forEach(el => {
        const key = el.getAttribute("data-i18n");
        if (i18n[lang][key]) el.textContent = i18n[lang][key];
    });
</script>
</body>
</html>
